﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery formValidator表单验证插件 -- by:猫冬，email:wzmaodong@126.com</title>
<meta name="Author" content="猫冬">
<meta name="description" content="jQuery formValidator表单验证插件" />
<meta name="keywords" content="jQuery,formValidator,插件,表单,验证,插件,javascript,表单验证,提示层" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="formValidator-4.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<script language="javascript" src="DateTimeMask.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({formID:"form1",theme:'ArrowSolidBox',mode:'AutoTip',onError:function(msg){},inIframe:true});




/*
	$("#us")
		.formValidator(
				{onShow:"请输入用户名,只有输入\"maodong\"才是对的",
				onFocus:"用户名至少6个字符,最多10个字符",
				onCorrect:"该用户名可以注册"})
		
		.regexValidator({regExp:"username",
						dataType:"enum",
						onError:"用户名格式不正确"});
	
	$("#xueli").formValidator({onShow:"请选择你的学历",onFocus:"学历必须选择",onCorrect:"谢谢你的配合",defaultValue:"a"}).inputValidator({min:"1",onError:"必选"});
	
	*/
	
	new inputValidator('#xueli',{
			onShow		:	"请选择你的学历",
			onFocus		:	"学历必须选择",
			onCorrect	:	"谢谢你的配合",
			min			:	"1",
			onError		:	"必选",
			
	});
	
});


(function(attrs){
	//alert(attrs.name);
	if(attrs.name===undefined){
		//alert('a');
	}
})({'age':'15'});


function formValidator(selector,attrs,formId){

	new inputValidator(selector,attrs);
}

function inputValidator(selector,attrs){
	var _This=this;
	this.attrs=attrs;
	this.selector=selector;
	
	this.checkAttrs=function(){
		if(_This.attrs.onShow===undefined){
			_This.attrs.onShow='';
		}
		if(_This.attrs.onFocus===undefined){
			_This.attrs.onFocus='';
		}
		if(_This.attrs.onCorrect===undefined){
			_This.attrs.onCorrect='';
		}
		if(_This.attrs.min===undefined){
			_This.attrs.min='0';
		}
		
		if(_This.attrs.max===undefined){
			_This.attrs.max='999999';
		}
		
		if(_This.attrs.onError===undefined){
			_This.attrs.onError='';
		}
		
		if(_This.attrs.dataType===undefined){
			_This.attrs.dataType='enum';
		}
		
	}
	
	
	this.addFormValidator=function(){
		var msg={
			onShow		:		_This.attrs.onShow,
			onFocus		:		_This.attrs.onFocus,
			onCorrect	:		_This.attrs.onCorrect
		}
		$(selector).formValidator(msg)
	}
	
	this.addInputValidator=function(){
		var msg={
				min		:		_This.attrs.min,
				max		:		_This.attrs.max,
				onError	:		_This.attrs.onError
		}
		$(selector).inputValidator(msg)
	}
	
	this.addRegexValidator=function(){
		var msg={
				regExp		:		_This.attrs.regExp,
				dataType	:		_This.attrs.dataType,
				onError		:		_This.attrs.onError
		}
		$(selector).regexValidator(msg)
	}
	
	this.init=function(){
		_This.checkAttrs();
		_This.addFormValidator();
		_This.addInputValidator();
		if(!(_This.attrs.regExp===undefined)){	
			_This.addRegexValidator();
		}
	}
	
	_This.init();
	
	
}

</script>
<style type="text/css" media="all">
body,div{font-size:12px;}
tr{height:32px;}
</style>
</head>

<body>
<h3>jQuery formValidator表单验证插件示例</h3>
<p><strong>自动构建提示层(AutoTip)：自动构建提示层。你无须自己放置div，插件自动回在校验控件后面添加提示层</strong></p>
<p>请访问官方网站获取更多的资料和帮助:<a href="http://www.yhuan.com/">http://www.yhuan.com/</a></p>
<form action="" method="post" name="form1" id="form1">
  
  
    <input type="submit" name="button" id="button" value="提交" />
<br />
  <table border="0px" style="font-size:12px" width="630px">
    <tr> 
      <td align="right">用户名:</td>
      <td><input type="text" id="us" name="us" style="width:120px" value="maodong" /></td>
    </tr>
    
   
    <tr> 
      <td align="right">你的学历:</td>
      <td> <select name="xueli" id="xueli">
          <option value="">－－请选择你的学历－－</option>
          <option value="a">专科</option>
          <option value="b">本科</option>
          <option value="c">研究生</option>
          <option value="e">硕士</option>
          <option value="d">博士</option>
        </select> </td>
    </tr>
 
   
  </table>
  
</form>
<div id="output"></div>
</body>
</html>